<!--
 * @Description: 机器人类型侧边
 * @Author: 阳婷
 * @Date: 2021-03-18 14:14:43
 * @LastEditTime: 2022-03-18 17:18:05
 * @LastEditors: 阳婷
-->
<template>
    <div class="sideBox">
        <div class="sideBoxInfo">
            <el-form ref="form" :rules="rules" :model="form" label-width="140px">
                <el-form-item label="房间号" prop="room_code">
                    <el-input v-model="form.room_code" clearable></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="footerBtn">
            <el-button @click="onSubmit" type="primary" size="small">保存</el-button>
        </div>
    </div>
</template>
<script>
    import {
        deepCopy,
        isEmptyObject
    } from "@/utils/index"
    export default {
        props: ["rowData"],
        data() {
            return {
                rules: {
                    room_code: [{
                        required: true,
                        message: "请输入房间号",
                        trigger: "blur"
                    }]
                },
                form: {
                    id: '',
                    room_code: '',
                    room_name: '',
                    remark: ''
                }
            }
        },
        watch: {
            rowData() {
                this.clearData();
                if (!isEmptyObject(this.rowData)) {
                    this.form = deepCopy(this.rowData);
                }
            }
        },
        mounted() {
            this.clearData();
            if (!isEmptyObject(this.rowData)) {
                this.form = deepCopy(this.rowData)
            }
        },
        methods: {
            onSubmit() {
                if (this.form.room_code !="") {
                    if (this.form.id!="") {
                        this.update()
                    } else {
                        this.add()
                    }
                } else {
                    this.$message({
                        type: "warning",
                        message: "房间号必须填写"
                    })
                }
            },
            add() {
                this.$ajax("post", "/api/rooms", this.form, data => {
                    if (data.code == 200) {
                        this.clearData();
                        this.closeBox()
                    }
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            update() {
                this.$ajax("put", "/api/rooms/" + this.form.id, this.form, data => {
                    if (data.code == 200) {
                        this.clearData()
                        this.closeBox()
                    }
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            closeBox() {
                this.$parent.$parent.$parent.show = false
                this.$parent.$parent.$parent.getData()
            },
            clearData() {
                this.form = {
                    id: '',
                    room_code: '',
                    room_name: '',
                    remark: ''
                }
            }
        }
    }
</script>
<style scoped>
    .sideBox {
        padding: 20px;
        overflow: auto;
    }

    .counterBox {
        width: 100%;
        min-height: 100px;

    }

    .counterName {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .counterLayer {
        /* vertical-align: top; */
    }

    .counterLayerName {
        display: inline-block;
        width: 100px;
        height: 100px;
        /* line-height: 100px; */
        vertical-align: top;
        border: 1px dashed #aaa;
        border-right: none;
    }

    .counterCellBox {
        display: inline-block;
        width: calc(100% - 102px);
        height: 100px;
        /* border: 2px solid #aaa; */
        border-right: none;
    }

    .cellFlex {
        display: flex;
        margin-right: 10px;
    }

    .counterCell {
        min-width: 100px;
        /* display: flex; */
        flex-grow: 1;
        height: 100px;
        border: 1px solid #aaa;
        border-right: none;
    }

    .counterCell:last-child {
        border-right: 1px solid #aaa;
    }

    .cellList {
        /* flex-direction: row */
    }
</style>